<template>
    <div class="h-full w-full bg-black text-white overflow-hidden relative touch-none">
      <div class="absolute top-0 left-0 w-full h-full z-0 overflow-hidden pointer-events-none">
        <div class="gradient-orb top-left"></div>
        <div class="gradient-orb bottom-right"></div>
        <div class="grid-overlay"></div>
      </div>
  
      <div class="flex flex-col relative z-10 h-full">
        <div class="flex-1 flex flex-col px-6 pt-6 mx-auto w-full h-full">
          <div class="flex items-center mb-8 gap-4">
            <button 
              class="border-none rounded-full w-8 h-8 flex items-center justify-center cursor-pointer transition-colors duration-200" 
              @click="navigation.handleBack"
            >
              <BackIcon :size="10" />
            </button>
            <div class="flex-1">
              <div class="h-4 bg-white/10 rounded overflow-hidden mr-10">
                <div class="progress-fill" :style="ui.progressStyle">
                  <span class="text-xl pr-2 text-black">{{ ui.progressText }}</span>
                </div>
              </div>
            </div>
          </div>
  
          <div class="flex-1 overflow-y-auto custom-scrollbar w-[100%] m-auto">
            <div class="flex-1 flex flex-col justify-between gap-8 will-change-transform pb-4 max-w-[800px] m-auto">
              <div class="text-center animate-fadeIn">
                <h1 class="text-5xl font-bold mb-2 bg-gradient-to-r from-[#4A99E9] to-[#5C2797] bg-clip-text text-transparent will-change-transform">
                  {{ ui.showAnswer ? quizData.currentQuestion.correctWord : "?????" }}
                </h1>
                <div class="flex items-center justify-center gap-2 mb-4">
                  <EnglishPronunciationButton @click="speech.playPronunciation" />
                  <div class="text-lg text-white/70">{{ quizData.currentQuestion.phonetic }}</div>
                </div>
                <div v-if="!ui.showAnswer" class="flex flex-col items-center gap-2 my-4">
                  <div class="w-20 h-0.5 bg-white/30"></div>
                  <div class="w-12 h-0.5 bg-white/30"></div>
                </div>
                <div v-else class="text-2xl text-white/90 my-4 animate-fadeIn">
                  {{ quizData.currentQuestion.definition }}
                </div>
              </div>
  
              <div class="flex-1 flex flex-col gap-6">
                <div v-if="!ui.showAnswer" class="grid grid-cols-1 gap-4">
                  <button 
                    v-for="(option, index) in quizData.currentQuestion.options" 
                    :key="index"
                    class="bg-white/5 rounded-lg p-6 text-center hover:bg-white/10 transition-all duration-200"
                    @click="() => quizHandler.checkAnswer(option)"
                  >
                    <span class="text-xl font-semibold">{{ option }}</span>
                  </button>
                </div>
  
                <div 
                  v-if="ui.showAnswer"
                  class="bg-white/5 rounded-lg p-6 mb-4 will-change-transform cursor-pointer" 
                  @click="speech.playExampleSentence"
                >
                  <p 
                    class="text-lg leading-relaxed mb-2" 
                    v-html="quizData.highlightedExample"
                  ></p>
                  <p class="text-base text-white/70 animate-fadeIn">
                    {{ quizData.currentQuestion.example.translation }}
                  </p>
                </div>
  
                <div 
                  v-if="ui.showAnswer" 
                  class="bg-white/5 rounded-lg p-6 animate-fadeIn will-change-transform"
                >
                  <div class="flex flex-col gap-4">
                    <div 
                      v-for="(relatedWord, index) in quizData.currentQuestion.relatedWords" 
                      :key="index" 
                      class="border-b border-white/10 pb-3 last:border-b-0 last:pb-0"
                    >
                      <div class="flex items-center gap-2 mb-1">
                        <span 
                          class="font-semibold text-[#4A99E9] cursor-pointer" 
                          @click="() => speech.playRelatedWord(relatedWord.word)"
                        >
                          {{ relatedWord.word }}
                        </span>
                        <span class="text-sm text-white/60">{{ relatedWord.partOfSpeech }}</span>
                      </div>
                      <div class="text-[0.95rem] text-white/80">{{ relatedWord.definition }}</div>
                    </div>
                  </div>
                  <div class="mt-4 text-right">
                    <span class="inline-block bg-[rgba(92,39,151,0.3)] px-3 py-1 rounded-full text-sm">
                      {{ quizData.currentQuestion.wordFamily }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class="flex gap-4 mt-4 justify-center py-4">
            <template v-if="ui.showAnswer && !quizHandler.isLastQuestion">
              <button 
                class="flex-1 py-4 border-none rounded-lg text-white font-semibold text-lg transition-all duration-300 bg-gradient-to-r from-blue-500 to-purple-800 hover:opacity-90 active:opacity-80" 
                @click="quizHandler.handleNextQuestion"
              >
                下一题
              </button>
            </template>
            
            <template v-else-if="ui.showAnswer && quizHandler.isLastQuestion">
              <button 
                class="flex-1 py-4 border-none rounded-lg bg-gradient-to-r from-blue-500 to-purple-800 text-white font-semibold text-lg transition-all duration-300 hover:opacity-90 active:opacity-80"
                @click="navigation.generateEssay"
              >
                <div class="flex items-center justify-center gap-2">
                  <span>生成AI文章</span>
                </div>
              </button>
              <button 
                class="flex-1 py-4 border-none rounded-lg bg-[#333] text-white font-semibold text-lg transition-all duration-300 hover:bg-[#444] active:bg-[#555]" 
                @click="navigation.handleBack"
              >
                退出学习
              </button>
            </template>
          </div>
        </div>
      </div>
    </div>  
  </template>
  
  <script setup>
  import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import BackIcon from '../components/icons/BackIcon.vue';
  import EnglishPronunciationButton from '../components/icons/EnglishPronunciationButton.vue';
  import { useProgress } from '@/composables/useProgress';
  
  const router = useRouter();
  const route = useRoute();
  const lessonId = computed(() => route.params.id || '未知课程');
  const progressManager = useProgress('quiz');
  
  const quizData = reactive({
    questionList: [
      {
        correctWord: 'parasite',
        phonetic: '/pærəsaɪt/',
        definition: 'n. 寄生虫，寄生动植物',
        options: ['parasite', 'paradise', 'paragon', 'paradigm'],
        example: {
          text: 'Many diseases are caused by parasites.',
          translation: '许多疾病都是由寄生虫引起的。',
          highlight: 'parasites'
        },
        relatedWords: [
          { word: 'parasitic', partOfSpeech: 'adj.', definition: '寄生的；由寄生虫引起的' },
          { word: 'parasitize', partOfSpeech: 'v.', definition: '寄生于；侵害；使寄生' },
          { word: 'parasitism', partOfSpeech: 'n.', definition: '寄生现象；寄生状态' }
        ],
        wordFamily: '派生'
      },
      {
        correctWord: 'abundant',
        phonetic: '/əˈbʌndənt/',
        definition: 'adj. 丰富的；充裕的；大量的',
        options: ['abundant', 'abrupt', 'absent', 'absurd'],
        example: {
          text: 'The region has abundant natural resources.',
          translation: '该地区拥有丰富的自然资源。',
          highlight: 'abundant'
        },
        relatedWords: [
          { word: 'abundance', partOfSpeech: 'n.', definition: '丰富，充裕；大量' },
          { word: 'abundantly', partOfSpeech: 'adv.', definition: '丰富地；大量地' }
        ],
        wordFamily: '派生'
      },
      {
        correctWord: 'crucial',
        phonetic: '/ˈkruːʃl/',
        definition: 'adj. 关键的；决定性的；至关重要的',
        options: ['crucial', 'critical', 'credible', 'crumble'],
        example: {
          text: 'Getting enough sleep is crucial for good health.',
          translation: '获得充足的睡眠对健康至关重要。',
          highlight: 'crucial'
        },
        relatedWords: [
          { word: 'crucially', partOfSpeech: 'adv.', definition: '至关重要地；决定性地' }
        ],
        wordFamily: '派生'
      }
    ],
    
    quizState: {
      totalQuestions: 0,
      correctAnswers: 0,
      currentQuestionIndex: 0,
      totalProgress: {
        totalCompletedQuestions: 0,
        totalQuestions: 0
      }
    },
    
    get currentQuestion() {
      const index = this.quizState.currentQuestionIndex;
      return index < this.questionList.length ? this.questionList[index] : this.questionList[0];
    },
    
    get highlightedExample() {
      const example = this.currentQuestion.example;
      return example.text.replace(
        example.highlight, 
        `<span class='text-[#4A99E9] font-semibold'>${example.highlight}</span>`
      );
    }
  });
  
  const sessionCorrect = ref(0);
  
  const ui = reactive({
    showAnswer: false,
    
    get progress() {
      const totalProgress = quizData.quizState.totalProgress;
      if (totalProgress.totalQuestions === 0) return 0;
      return Math.round((totalProgress.totalCompletedQuestions / totalProgress.totalQuestions) * 100);
    },
    
    get progressText() {
      return `${this.progress}%`;
    },
    
    get progressStyle() {
      return {
        width: `${this.progress}%`
      };
    }
  });
  
  const quizHandler = reactive({
    get isLastQuestion() {
      return quizData.quizState.currentQuestionIndex >= quizData.questionList.length - 1;
    },
    
    async checkAnswer(selectedWord) {
      const currentQuestion = quizData.currentQuestion;
      const isCorrect = selectedWord === currentQuestion.correctWord;
      
      console.log(`User selected: ${selectedWord}, Correct: ${isCorrect}`);
      
      if (isCorrect) {
        sessionCorrect.value++;
        
        await this.saveQuizProgress();
        
        await this.fetchQuizProgress();
      }
      
      ui.showAnswer = true;
    },
    
    async handleNextQuestion() {
      quizData.quizState.currentQuestionIndex++;
      
      ui.showAnswer = false;
      
      await nextTick();
    },
    
    async fetchQuizProgress() {
      try {
        const progressData = await progressManager.getQuizProgressData(lessonId.value, 'phonetic');
        quizData.quizState.totalProgress = {
          totalCompletedQuestions: progressData.completedQuestions + sessionCorrect.value,
          totalQuestions: progressData.totalQuestions
        };
      } catch (error) {
        console.error('Error fetching quiz progress:', error);
        // 使用降级数据
        quizData.quizState.totalProgress = {
          totalCompletedQuestions: sessionCorrect.value,
          totalQuestions: 20
        };
      }
    },
    
    async saveQuizProgress() {
      try {
        console.log(`Saving quiz progress to backend for lesson ${lessonId.value}`);
        
        const progressData = {
          completedQuestions: quizData.quizState.totalProgress.totalCompletedQuestions + 1,
          correctAnswers: quizData.quizState.correctAnswers,
          totalQuestions: quizData.quizState.totalProgress.totalQuestions
        };
        
        await progressManager.saveQuizProgressData(lessonId.value, 'phonetic', progressData);
        quizData.quizState.totalProgress.totalCompletedQuestions += 1;
        
      } catch (error) {
        console.error('Error saving quiz progress:', error);
        // 即使保存失败，也更新本地状态
        quizData.quizState.totalProgress.totalCompletedQuestions += 1;
      }
    },
    
    async loadQuizData() {
      try {
        ui.showAnswer = false;
        
        const lessonDetails = await progressManager.getLessonDetailsData(lessonId.value);
        if (lessonDetails) {
          quizData.quizState = {
            ...quizData.quizState,
            totalQuestions: lessonDetails.totalQuestions || lessonDetails.quiz_count || 20,
            correctAnswers: lessonDetails.correctAnswers || 0
          };
        }
      } catch (error) {
        console.error('Error loading quiz data:', error);
        // 使用降级数据
        quizData.quizState = {
          ...quizData.quizState,
          totalQuestions: 20,
          correctAnswers: 0
        };
      }
    }
  });
  
  const speech = reactive({
    playPronunciation() {
      this.playSpeech(quizData.currentQuestion.correctWord);
    },
    
    playExampleSentence() {
      this.playSpeech(quizData.currentQuestion.example.text);
    },
    
    playRelatedWord(word) {
      this.playSpeech(word);
    },
    
    playSpeech(text) {
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(text);
        
        utterance.lang = 'en-US';
        
        const voices = window.speechSynthesis.getVoices();
        
        const englishVoice = voices.find(voice => 
          voice.lang.includes('en') && voice.name.includes('Female')
        ) || voices.find(voice => voice.lang.includes('en'));
        
        if (englishVoice) {
          utterance.voice = englishVoice;
        }
        
        utterance.volume = 1;
        utterance.rate = 0.9;
        utterance.pitch = 1;
        
        window.speechSynthesis.speak(utterance);
        
        console.log(`Playing pronunciation for: ${text}`);
      } else {
        console.warn('当前浏览器不支持语音合成API');
      }
    },
    
    initSpeechSynthesis() {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.getVoices();
      }
    }
  });
  
  const navigation = reactive({
    get unitId() {
      const id = lessonId.value;
      if (id && id.includes('-')) {
        return parseInt(id.split('-')[0]);
      }
      return null;
    },
    
    handleBack() {
      if (sessionCorrect.value !== 0) {
        quizHandler.saveQuizProgress();
      }
      
      sessionCorrect.value = 0;
      
      if (this.unitId) {
        router.push(`/reading?unit=${this.unitId}`);
      } else {
        router.push('/reading');
      }
    },
    
    generateEssay() {
      const essayId = `essay-unit-${this.unitId}`;
      
      if (sessionCorrect.value !== 0) {
        quizHandler.saveQuizProgress();
      }
      
      sessionCorrect.value = 0;
      
      router.push(`/reading/essay/${essayId}`);
    }
  });
  
  onMounted(async () => {
    speech.initSpeechSynthesis();
    await quizHandler.fetchQuizProgress();
    await quizHandler.loadQuizData();
  });
  
  onBeforeUnmount(() => {
    if (sessionCorrect.value !== 0) {
      quizHandler.saveQuizProgress();
    }
    
    sessionCorrect.value = 0;
    
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel();
    }
  });
  </script>
  
  <style scoped>
  * {
    touch-action: pan-y;
  }
  
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
  
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
  }
  
  .top-left {
    top: -10%;
    left: -10%;
    width: 45%;
    height: 45%;
    background: linear-gradient(135deg, rgba(74, 153, 233, 0.2) 0%, rgba(49, 89, 163, 0.07) 100%);
    animation: float 15s ease-in-out infinite alternate;
  }
  
  .bottom-right {
    bottom: -15%;
    right: -15%;
    width: 55%;
    height: 55%;
    background: linear-gradient(225deg, rgba(74, 153, 233, 0.15) 0%, rgba(92, 39, 151, 0.07) 100%);
    animation: float 20s ease-in-out infinite alternate-reverse;
  }
  
  .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, rgba(48, 51, 54, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(48, 51, 54, 0.08) 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.3;
    pointer-events: none;
  }
  
  @keyframes float {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(5%, 5%);
    }
  }
  
  .progress-fill {
    height: 100%;
    background: white;
    border-radius: 4rem;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
  }
  </style>